<style lang="scss" scoped>
    @import '~@/scss/global/colors.scss';
    .ui.page-content{
        background:$content-bg !important;
    }
    .subMenu{
        a{
            position:relative;
            cursor:pointer;
            color:$header-txt;
            margin:0 15px;
            &:hover{
                color:$header-heightLight;
            }
            &:last-child{
                margin-right:0;
            }
        }
        a.active{
            color:$header-heightLight;
        }
        &::before{
            display:none;
        }
        padding:0 !important;
        .active{
            padding:6px 15px 0 15px;
            position:relative;
            background:rgba(#fff, .1);
            height:30px;
            top:0;
            border-radius:3px;
        }
    }
</style>
<template>
    <div class="ui top menu navbar" style="border-radius:0;margin:0" v-if="noLogin" v-show="showbar">
        <div class="item">
            <img src=""
                alt="logo"
                style="position:absolute;width:59px; left:0; top:6px;z-index:99">
            <span class="logo-txt">博益科技-内部系统</span>
        </div>
        <div class="item subMenu">
            <a v-for="(ss,index) in subs"
                :key="index"
                :class="{ active: +current_sid === +ss.id}"
                :href="'?pid=' + current_pid + '&sid=' + ss.id">
                <i :class="ss.icon"></i>
                {{ss.subsystem_name}}
            </a>
        </div>
        <div class="menu right">
            <div class="item">
                <a href="#/welcome">
                    <i class="home icon"></i>
                    个人中心
                </a>
            </div>
            <div class="item">
                <a :href="url + '/screen.jsp'" target="_blank">
                    <i class="el-icon-mobile-phone"></i>
                    销售看板
                </a>
            </div>
            <!--<el-dropdown size="small" class="item" trigger="hover" :show-timeout="0" :hide-timeout="300">
                <a>
                    <i class="file icon"></i>
                    产品
                </a>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="p in products" :key="p.id">
                        <a :href="'http://localhost:8800?pid=' + p.id">{{p.internal_name}}</a>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>-->
            <el-dropdown size="small"
                placement="top"
                class="item"
                @command="logout"
                trigger="hover"
                :show-timeout="10"
                :hide-timeout="300">
                <a>
                    <img class="ui avatar image" :src="avatar">
                    <span>{{empName}}</span>
                </a>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item disabled>
                        <i class="icon question"></i>
                        帮助
                    </el-dropdown-item>
                    <el-dropdown-item divided>
                        <i class="power off icon"></i>
                        退出
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'appHeader',
        data() {
            return {
                url: '',
                imageUrl: BASE_URL + 'upload/tuzi.gif',
                empName: '',
                avatar: '',
                showbar:false
            }
        },
        mounted() {
            this.url = BASE_URL
            this.$router.afterEach((to, from) => {
                if (this.$EMP) {
                    this.empName = this.$EMP.emp_name
                }
                if (this.$EMP && this.$EMP.person_photo) {
                    this.avatar = BASE_URL + this.$EMP.person_photo
                }else{
                    this.avatar = '/static/tuzi.gif'
                }
                this.showbar = true

            })
        },
        methods: {
            logout() {
                this.$store.dispatch('FedLogout')
                    .then(() => {
                        //处理url不要带着产品子系统参数。
                        let path = window.location.href;
                        if (path.indexOf('?') > 0) {
                            window.location.href = path.split('?')[0] + '#/login'
                        }else{
                            window.location.href = path.split('#')[0] + '#/login'
                        }
                    })
                    .catch(err => {
                        this.log(err)
                    })
            }
        },
        computed: {
            noLogin() {
                let path = this.$route.fullPath
                return path !== '/loginFed' && path !== '/login' && path !== '/welcome'
            },
            products() {
                return this.$store.state.permission.products;
            },
            subs() {
                return this.$store.state.permission.subs;
            },
            current_pid() {
                return this.$store.state.permission.current_pid;
            },
            current_sid() {
                return this.$store.state.permission.current_sid;
            }
        }
    }
</script>
